﻿@{
    ViewBag.Title = "Timeline";
    int shift = 0;
}



@model Timeline.Models.EventsModel
<h2>Timeline</h2>

<div class="prev" style="float: left; position :relative; top= 200px">
<a href="/?docent=@ViewBag.Docent&datum=@Model.startDate.AddDays(0-(Model.Duration))"><img src="@Url.Content("~/Content/arrow_left.png")" style="padding: 10px;" /></a>
</div>
<div style=" float:left;">
    <table class="days">
        <tr>
        @if (Model.Duration > 43)
        {
            Model.Duration = 42;
        }
        @for (int i = 0; i < Model.Duration; i += shift)
        {
            int collSpan = 0;
            DayOfWeek weekDay = Model.startDate.AddDays(i).DayOfWeek;
            switch (weekDay)
            {
                case DayOfWeek.Monday:
                    collSpan = 7;
                    shift = 7;
                    break;
                case DayOfWeek.Tuesday:
                    collSpan = 6;
                    shift = 6;
                    break;
                case DayOfWeek.Wednesday:
                    collSpan = 5;
                    shift = 5;
                    break;
                case DayOfWeek.Thursday:
                    collSpan = 4;
                    shift = 4;
                    break;
                case DayOfWeek.Friday:
                    collSpan = 3;
                    shift = 3;
                    break;
                case DayOfWeek.Saturday:
                    collSpan = 2;
                    shift = 2;
                    break;
                case DayOfWeek.Sunday:
                    collSpan = 1;
                    shift = 1;
                    break;
                default:
                    break;
            }
            if (collSpan <= 6)
            {
                <td colspan="@collSpan"></td>
            }
            else
            {
                <td colspan="@collSpan">
                    @Model.startDate.AddDays(i).Day-@Model.startDate.AddDays(i).Month-@Model.startDate.AddDays(i).Year
                </td>
            }
        }
        </tr>
        <tr>
         @for (int i = 0; i < Model.Duration; i += shift)
         {
             int collSpan = 0;
             DayOfWeek weekDay = Model.startDate.AddDays(i).DayOfWeek;
             switch (weekDay)
             {
                 case DayOfWeek.Monday:
                     collSpan = 6;
                     shift = 7;
                     break;
                 case DayOfWeek.Tuesday:
                     collSpan = 6;
                     shift = 6;
                     break;
                 case DayOfWeek.Wednesday:
                     collSpan = 5;
                     shift = 5;
                     break;
                 case DayOfWeek.Thursday:
                     collSpan = 4;
                     shift = 4;
                     break;
                 case DayOfWeek.Friday:
                     collSpan = 3;
                     shift = 3;
                     break;
                 case DayOfWeek.Saturday:
                     collSpan = 2;
                     shift = 2;
                     break;
                 case DayOfWeek.Sunday:
                     collSpan = 1;
                     shift = 1;
                     break;
                 default:
                     break;
             }
             if (shift <= 6)
             {
                <td colspan="@collSpan"></td>
             }
             else
             {  
                <td align="center">V</td>
                <td colspan="@collSpan">&nbsp;</td>
             }
         }
        </tr>
        <tr>
        @for (int i = 0; i < Model.Duration; i++)
        {
            String response = "";
            String tableClass = "";
            DayOfWeek weekDay = Model.startDate.AddDays(i).DayOfWeek;
            switch (weekDay)
            {
                case DayOfWeek.Monday:
                    response = "M";
                    tableClass = "week";
                    break;
                case DayOfWeek.Tuesday:
                    response = "D";
                    tableClass = "week";
                    break;
                case DayOfWeek.Wednesday:
                    response = "W";
                    tableClass = "week";
                    break;
                case DayOfWeek.Thursday:
                    response = "D";
                    tableClass = "week";
                    break;
                case DayOfWeek.Friday:
                    response = "V";
                    tableClass = "week";
                    break;
                case DayOfWeek.Saturday:
                    response = "Z";
                    tableClass = "weekend";
                    break;
                case DayOfWeek.Sunday:
                    response = "Z";
                    tableClass = "weekend";
                    break;
                default:
                    response = "404:day could not be found";
                    break;
            }
            if (Model.Dates[i].Events.Count() > 0)
            {
                if (tableClass == "week")
                {
                    tableClass = "weekEvent";
                }
                else
                {
                    tableClass = "weekendEvent";
                }
            }             
        <td class="@tableClass" id="@i">@response</td> 
        }      
        </tr>
    @*<tr>
    @for (int i = 0; i < Model.Duration; i++)
    {
        if (Model.Dates[i].Events.Count() > 0)
        {
            
            <td id="@i" class="hasEvent">    
            </td>

        }
        else
        {
            <td class="noEvent" ></td>
        }


    }
    </tr>
    *@
    </table>
</div>
<div class="next" style="float: left; position :relative; top= 200px">
    <a href="/?docent=@ViewBag.Docent&datum=@Model.startDate.AddDays(Model.Duration)"><img src="@Url.Content("~/Content/arrow_right.png")" style="padding: 10px;" /></a>
</div>
<div style="clear: both;">&nbsp;</div>



<div>

</div>



@for (int i = 0; i < Model.Duration; i++)
{
    if (Model.Dates[i].Events.Count() > 0)
    {
        int leftPosition = i * 24 + 100;
        int topPosition = 270;
        String divLeft = leftPosition.ToString() + "px";
        String divTop = topPosition.ToString() + "px";
        String divId = i.ToString() + "div";
        String divForDatum = "eventsFor" + i.ToString();
        
        <div class="eventDiv" id="@divId"style="position: absolute; left: 0; top: @divTop; display:none">
        <table>
        <tr> 
        <td>Datum:
        </td>
        <td>@Model.Dates[i].Datum.Day-@Model.Dates[i].Datum.Month-@Model.Dates[i].Datum.Year
        </td>
        </tr>
        @for (int x = 0; x < Model.Dates[i].Events.Count; x++)
        {
            <tr>
            <td class="eventType">
                @Model.Dates[i].Events[x].EventType
            </td>
            <td class="eventMessage">
                @Model.Dates[i].Events[x].Message
            </td>
            </tr>
        }
        </table>        
        </div>
    // The div for each days appointment per event
        <div id="@divForDatum" style="display: none">
            <table>
             @for (int x = 0; x < Model.Dates[i].Events.Count; x++)
            {

                <tr>
                    <td>
                        @Model.Dates[i].Events[x].Assignment1.Student1.Number
                    </td>
                    <td>
                        @Model.Dates[i].Events[x].Assignment1.Student1.FirstName @Model.Dates[i].Events[x].Assignment1.Student1.LastName     
                    </td>
                </tr>
                <tr>
                    <td class="">
                        @Model.Dates[i].Events[x].EventType
                    </td>
                    <td class="">
                        @Model.Dates[i].Events[x].Message
                    </td>
                </tr>
            }    
            </table>   
        </div>       
    }
}

<script type="text/javascript">
    var divShown = false;
    var divIdShown = "";
    var dateDivShown = false;
    var elementClicked = "";
    $(document).ready(function () {
        $(".weekEvent, .weekendEvent").bind("mouseenter", function (e) {
            var divId = $(this).attr('id') + "div";
            if (!divShown || divIdShown != divId) {
                if (divIdShown != "") {
                    $("#" + divIdShown).fadeOut(500);
                }
                $('#' + divId).fadeIn(250, function () {
                    divShown = true;
                    divIdShown = divId;
                });
            }
        });
        $(".weekEvent, .weekendEvent").bind("mouseleave", function (e) {
            var divId = $(this).attr('id') + "div";
            if (divShown) {
                $('#' + divId).fadeOut(500, function () {
                    if (divId == divIdShown) {
                        divShown = false;
                        divIdShown = "";
                    }
                });
            }
        });
        $(".weekEvent, .weekendEvent").bind("mousemove", function (e) {
            var divId = $(this).attr('id') + "div";
            $('#' + divId).css({ "left": e.pageX, "top": e.pageY });
        });


        $(".weekEvent, .weekendEvent").bind("click", function (e) {
            var clicked = $(this).attr('id');
            var divId = "eventsFor" + $(this).attr('id');
            var dateDivIdShown = "";
            $(this).addClass('selectedDay');
            if (elementClicked != "") {
                dateDivIdShown = "eventsFor" + elementClicked;
            }
            if (!dateDivShown) {
                $('#' + divId).slideDown(250, function () {
                    dateDivShown = true;
                    elementClicked = clicked;
                    dateDivIdShown = divId;
                });
                $(this).addClass('selectedDay');
            }

            else {
                if (dateDivIdShown == divId) {
                    $('#' + divId).slideUp(250, function () {
                        dateDivShown = false;
                        dateDivIdShown = "";
                        elementClicked = "";

                    });
                    $(this).removeClass("selectedDay");
                }

                else {
                    $('#' + elementClicked).removeClass('selectedDay');
                    $('#' + dateDivIdShown).slideUp(250);
                    $('#' + divId).slideDown(250, function () {
                        dateDivShown = true;
                        elementClicked = clicked;
                        dateDivIdShown = divId;
                    });
                    $(this).addClass('selectedDay');

                }
            }
        });

    });
</script>